import React, { useRef, useEffect } from "react"
import "./index.css"
import type { TodoItem } from "../../index"
interface TodoItemProps {
  item: TodoItem
  index: number
  removeTodoEvent: (index: number) => void
  todoCheckChangeEvent: (index: number) => void
}

const CopTodoItem: React.FC<TodoItemProps> = ({
  item,
  removeTodoEvent,
  index,
  todoCheckChangeEvent,
}) => {
  const todoItemRef = useRef<HTMLInputElement>(null)
  useEffect(() => {
    todoItemRef.current!.checked = item.isCheck
  }, [item])
  const removeTodo = () => {
    removeTodoEvent(index)
  }
  const todoCheckChange = () => {
    todoCheckChangeEvent(index)
  }
  return (
    <div className="item">
      <input
        type="checkbox"
        name={item.name}
        id={item.name}
        value={item.name}
        defaultChecked={item.isCheck}
        onChange={todoCheckChange}
        ref={todoItemRef}
      />
      <label htmlFor={item.name}>{item.name}</label>
      <button onClick={removeTodo}>删除</button>
    </div>
  )
}

export default CopTodoItem
